<template>
	<view class="box" :style="viewColor">
		<div class="shaxuan">
			<view v-for="(item,index) in list" @click="nametop=index" :class="nametop==index?'redname':''" :key="index">
				{{item.text}}
			</view>
		</div>
		<!-- AI统计 -->
		<view class="toDay" v-if="nametop==0&&AIDate">
			<view class="toDayTitle">今日概况<text>TODAY</text></view>
			<view class="toDayChart">
				<view>
					<view>访问人数</view>
					<view>{{AIDate.today.count}}</view>
				</view>
				<view>
					<view>新用户</view>
					<view>{{AIDate.today.new}}</view>
				</view>
				<view>
					<view>访问次数</view>
					<view>{{AIDate.today.view}}</view>
				</view>
			</view>
			<view class="selectTime">
				<view :class="toDayTime == 1 ? 'selectTimeBag' : '' " @click="toDayTime=1">今天</view>
				<view :class="toDayTime == 2 ? 'selectTimeBag' : '' " @click="toDayTime=2">昨天</view>
				<view :class="toDayTime == 3 ? 'selectTimeBag' : '' " @click="toDayTime=3">近7天</view>
				<view :class="toDayTime == 4 ? 'selectTimeBag' : '' " @click="toDayTime=4">近30天</view>
			</view>
			<view class="dataSwiper">
				<swiper :indicator-dots="true" :indicator-active-color="'var(--view-theme)'" class="swiper">
					<swiper-item>
						<view class="table">
							<view class="tableHeader">
								<text v-for="item in AIDate.title">{{item}}</text>
							</view>
							<view class="tableTd" v-for="item in AIDate.columns">
								<text v-for="item1 in item">{{item1}}</text>
							</view>
						</view>
					</swiper-item>
					<swiper-item>
						<view class="picker">
							<picker @change="bindPickerChange" :value="typeIndex" :range="typeList">
								<view class="uni-input">
									<text>{{typeList[typeIndex]}}</text>
									<image :src="imgHost+'/index/right.png'"></image>
								</view>
							</picker>
						</view>
						<view class="charts-box">
							<qiun-data-charts type="line" :opts="statisticalOpts" :chartData="statisticalChartData" />
						</view>
					</swiper-item>
				</swiper>
			</view>
			<view class="accessRanking">
				<view class="accessRankingTitle">访问排名<text>DATA</text></view>
				<view class="accessRankingContent" v-if="AIDate.rank&&AIDate.rank.length>0">
					<view v-for="(item,index) in AIDate.rank" class="infoList">
						<view class="infoItem" @click="goDetail(item.uid)">
							<view :class="index == 0 ? 'one' : (index == 1 ? 'two' : (index == 2 ? 'three' : '' ) ) ">
								{{index+1}}
							</view>
							<image :src="item.avatar" @click.stop="goSx(item)"></image>
							<view class="info">
								<view class="topView">
									<view class="leftView">
										<text>{{item.name}}</text>
									</view>
									<view class="centerView">
										<text @click.stop="bdPhone(item.phone)">{{item.phone}}</text>
									</view>
									<view class="rightView">
										<!-- <p>{{item.add_time}}</p> -->
									</view>
								</view>
								<view class="timeView">
									<p>{{item.add_time}}</p>
								</view>
								<view class="bottomView">
									<view class="left">
										<!-- <text @click="bdPhone(item.phone)">{{item.phone}}</text> -->
										<p v-if="item.type == 0 && item.num < 4">
											正在查看你的名片第<text>{{item.num}}</text>次，现在沟通，效率更高哦
										</p>
										<p v-if="item.type == 0 && item.num >= 4">
											正在查看你的名片第<text>{{item.num}}</text>次，成交有希望</p>
										<p v-if="item.type == 2 && item.num < 4 ">
											正在查看你的官网第<text>{{item.num}}</text>次，有望合作</p>
										<p v-if="item.type == 2 && item.num >= 4">
											正在查看你的官网第<text>{{item.num}}</text>次，可标记为重点客户</p>
										<p v-if="item.type == 1 ">正在查看你的商品第<text>{{item.num}}</text>次</p>
										<p v-if="item.type ==4">转发了你的名片第<text>{{item.num}}</text>次</p>
										<p v-if="item.type ==3">复制了你的微信第<text>{{item.num}}</text>次</p>
									</view>
									<!-- <view class="right">
										<image @click="goSx(item)" src="https://wdmp22.ysxtcn.cn/static/images/sx.png"
											mode="aspectFill"></image>
									</view> -->
								</view>
							</view>
							<view class="right">
								<image @click.stop="goSx(item)" src="https://wdmp22.ysxtcn.cn/static/images/sx.png"
									mode="aspectFill"></image>
							</view>
						</view>
						<!-- <view class="shop" v-if="item.type == 1 && item.product"
							@click="goShop(item.product.product_id)">
							<image :src="item.product.image" mode="aspectFit"></image>
							<text>{{item.product.store_name}}</text>
						</view> -->
					</view>
				</view>
				<view class="accessRankingNoContent" v-else>
					<view>暂无信息</view>
				</view>
			</view>
		</view>
		<!-- AI分析 -->
		<view class="AIAnalysis" v-if="nametop==1">
			<view class="AIAnalysisTime">
				<view :class="AIAnalysisTime == 1 ? 'selectTimeBag' : '' " @click="AIAnalysisTime=1">今天</view>
				<view :class="AIAnalysisTime == 2 ? 'selectTimeBag' : '' " @click="AIAnalysisTime=2">昨天</view>
				<view :class="AIAnalysisTime == 3 ? 'selectTimeBag' : '' " @click="AIAnalysisTime=3">近7天</view>
				<view :class="AIAnalysisTime == 4 ? 'selectTimeBag' : '' " @click="AIAnalysisTime=4">近30天</view>
			</view>
			<view class="AIAnalysisTitle">今日概况<text>TODAY</text></view>
			<view class="AIAnalysisChart">
				<view>
					<view>分享次数</view>
					<view>{{AIAnalysis.today.count}}</view>
				</view>
				<view>
					<view>分享人数</view>
					<view>{{AIAnalysis.today.new}}</view>
				</view>
				<view>
					<view>分享新增</view>
					<view>{{AIAnalysis.today.view}}</view>
				</view>
			</view>
			<view class="AIAnalysisTitle">分享明细占比<text>SHARE</text></view>
			<view class="shareCharts">
				<qiun-data-charts type="ring" :opts="shareOpts" :chartData="shareChartData" />
			</view>
			<view class="AIAnalysisTitle">分享者用户画像<text>USER</text></view>
			<view class="shareUserData">
				<view>
					<image :src="imgHost + '/men.png'"></image>
					<view>0%</view>
				</view>
				<view>
					<image :src="imgHost + '/wmen.png'"></image>
					<view>0%</view>
				</view>
				<view>
					<image :src="imgHost + '/what.png'"></image>
					<view>0%</view>
				</view>
			</view>
			<view class="AIAnalysisTitle">分享用户TOP10<text>DATA</text></view>
			<view class="table">
				<view class="tableHeader">
					<text>排名</text>
					<text>用户</text>
					<text>昵称</text>
					<text>分享次数</text>
					<text>查看次数</text>
				</view>
				<view class="tableContent" v-if="AIAnalysis.rank&&AIAnalysis.rank.length>0">
					<view v-for="(item,index) in AIAnalysis.rank">
						<text>{{index+1}}</text>
						<text>{{item.name}}</text>
						<text>{{item.name}}</text>
						<text>{{item.num}}</text>
						<text>{{item.num}}</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 业绩 -->
		<view class="results" v-if="nametop==2">
			<view class="resultsTime">
				<view :class="resultsTime == 1 ? 'selectTimeBag' : '' " @click="resultsTime=1">今天</view>
				<view :class="resultsTime == 2 ? 'selectTimeBag' : '' " @click="resultsTime=2">昨天</view>
				<view :class="resultsTime == 3 ? 'selectTimeBag' : '' " @click="resultsTime=3">近7天</view>
				<view :class="resultsTime == 4 ? 'selectTimeBag' : '' " @click="resultsTime=4">近30天</view>
			</view>
			<view class="resultsTitle">商城访问概率<text>STORE</text></view>
			<view class="resultsChart">
				<view>
					<view>访问商城次数</view>
					<view>{{resultsData.view.product}}</view>
				</view>
				<view>
					<view>成交笔数</view>
					<view>{{resultsData.view.pay_count}}</view>
				</view>
				<view>
					<view>客单价</view>
					<view>{{Number(resultsData.view.pay_money).toFixed(2)}}</view>
				</view>
			</view>
			<view class="resultsTitle">下单转化率<text>RATE</text></view>
			<view class="resultsCharts">
				<qiun-data-charts type="funnel" :opts="resultsOpts" :chartData="resultsChartData"
					:tooltipShow="false" />
			</view>
			<view class="resultsTitle">访问商品排名TOP5<text>DATA</text></view>
			<view class="resultsRankingContent" v-if="resultsData.rank.top.length>0">
				<view v-for="(item,index) in AIDate.rank" class="infoList" v-if="item.type == 1">
					<view class="infoItem">
						<view :class="index == 0 ? 'one' : (index == 1 ? 'two' : (index == 2 ? 'three' : '' ) ) ">
							{{index+1}}
						</view>
						<image :src="item.avatar" @click="goSx(item)"></image>
						<view class="info">
							<view class="topView">
								<view class="leftView">
									<text>{{item.name}}</text>
								</view>
								<view class="centerView">
									<text @click="bdPhone(item.phone)">{{item.phone}}</text>
								</view>
								<view class="rightView">
									<!-- <p>{{item.add_time}}</p> -->
								</view>
							</view>
							<view class="timeView">
								<p>{{item.add_time}}</p>
							</view>
							<view class="bottomView">
								<view class="left">
									<p v-if="item.num <= 2">
										正在查看你的商品第<text>{{item.num}}</text>次，现在沟通，效率更高哦
									</p>
									<p v-if="item.num > 2 && item.num <= 4">
										正在查看你的商品第<text>{{item.num}}</text>次，成交有希望</p>
									<p v-if="item.num > 4  && item.num <= 6">
										正在查看你的商品第<text>{{item.num}}</text>次，有望合作</p>
									<p v-if="item.num > 6">
										正在查看你的商品第<text>{{item.num}}</text>次，可标记为重点客户</p>
								</view>
								<!-- <view class="right">
									<image @click="goSx(item)" src="https://wdmp22.ysxtcn.cn/static/images/sx.png"
										mode="aspectFill"></image>
								</view> -->
							</view>
						</view>
						<view class="right">
							<image @click="goSx(item)" src="https://wdmp22.ysxtcn.cn/static/images/sx.png"
								mode="aspectFill"></image>
						</view>
					</view>
					<!-- <view class="shop" v-if="item.type == 1 && item.product" @click="goShop(item.product.product_id)">
						<image :src="item.product.image" mode="aspectFit"></image>
						<text>{{item.product.store_name}}</text>
					</view> -->
				</view>
			</view>
			<view class="resultsRankingNoContent" v-else>
				<view>暂无信息</view>
			</view>
			<view class="resultsTitle">成交率最高用户TOP10<text>DATA</text></view>
			<view class="resultsDealTopContent" v-if="resultsData.rank.pay.length>0">
				<view v-for="(item,index) in resultsData.rank.pay">
					<view>
						<view :class="index == 0 ? 'one' : (index == 1 ? 'two' : (index == 2 ? 'three' : '' ) ) ">
							{{index+1}}
						</view>
						<image :src="item.avatar"></image>
						<text>{{item.nickname}}</text>
					</view>
					<view>
						{{item.num}}次
					</view>
				</view>
			</view>
			<view class="resultsDealTopNoContent" v-else>
				<view>暂无信息</view>
			</view>
		</view>
		<view class="foot" v-if="false">
			<view class="page-footer" id="target" :style="{'background-color':newData.bgColor.color[0].item}">
				<view class="foot-item" v-for="(item,index) in newData.menuList" :key="index" @click="goRouter(item)">
					<block v-if="item.link == activeRouter">
						<image :src="item.imgList[0]"></image>
						<view class="txt" :style="{color:newData.activeTxtColor.color[0].item}">{{item.name}}
						</view>
					</block>
					<block v-else>
						<image :src="item.imgList[1]"></image>
						<view class="txt" :style="{color:newData.txtColor.color[0].item}">{{item.name}}</view>
					</block>
					<div class="count-num" v-if="item.link === '/pages/order_addcart/order_addcart' && cartNum > 0">
						{{cartNum}}
					</div>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		HTTP_REQUEST_URL
	} from '@/config/app.js';
	import {
		getShareTitle,
		getNavigation
	} from '@/api/public.js'
	import {
		card_survey,
		card_person,
		cardbe,
		cartAIStatistics,
		cartAchievement
	} from '@/api/userminp.js'
	import {
		mapGetters
	} from "vuex";
	export default {
		data() {
			return {
				// 选中类型
				nametop: 0,
				// 显示类型
				list: [{
						text: "AI统计"
					},
					{
						text: "AI分析"
					},
					{
						text: "业绩"
					},
				],
				// 设备宽度
				windowWidth: null,
				// 数据类型列表
				typeList: ['查看名片', '查看产品', '查看官网', '复制微信', '转发名片', '查看文章'],
				// 选中数据类型列表下标
				typeIndex: 0,
				// 图片拼接
				imgHost: HTTP_REQUEST_URL + '/mingpian',
				// AI统计选中时间
				toDayTime: 1,
				// AI数据
				AIDate: {},
				// AI分析数据
				AIAnalysis: {},
				// AI分析选中时间
				AIAnalysisTime: 1,
				// 业绩选中时间
				resultsTime: 1,
				// 业绩数据
				resultsData: {},
				// 分享chart数据
				shareChartData: {},
				// 分享chart展示类型
				shareOpts: {
					rotate: false,
					rotateLock: false,
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [5, 5, 5, 5],
					dataLabel: true,
					enableScroll: false,
					update: true,
					legend: {
						show: true,
						position: "bottom",
						lineHeight: 25
					},
					title: {
						name: "",
						fontSize: 15,
						color: "#666666"
					},
					subtitle: {
						name: "",
						fontSize: 25,
						color: "#7cb5ec"
					},
					extra: {
						ring: {
							ringWidth: 60,
							activeOpacity: 0.5,
							activeRadius: 10,
							offsetAngle: 0,
							labelWidth: 15,
							border: true,
							borderWidth: 3,
							borderColor: "#FFFFFF"
						}
					}
				},
				// AI统计chart展示数据
				statisticalChartData: {},
				// AI统计chart展示类型
				statisticalOpts: {
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [15, 15, 0, 15],
					enableScroll: false,
					width: "100",
					legend: {},
					update: true,
					xAxis: {
						disableGrid: true
					},
					yAxis: {
						gridType: "dash",
						dashLength: 2
					},
					extra: {
						area: {
							type: "curve",
							opacity: 0.2,
							addLine: true,
							width: 2,
							gradient: true,
							activeType: "hollow"
						}
					}
				},
				// 业绩chart展示类型
				resultsOpts: {
					color: ["#6772E5", "#24D2B5", "#FF5C6C"],
					padding: [0, 0, 0, 0],
					enableScroll: false,
					fontSize: 10,
					update: true,
					extra: {
						funnel: {
							activeOpacity: 0.3,
							labelWidth: 100,
							activeWidth: 10,
							border: true,
							borderWidth: 10,
							borderColor: "#FFFFFF",
							fillOpacity: 1,
							labelAlign: "right",
							type: "custom",
							min: 10,
							max: 100,
							minSize: "40",
							maxSize: "148",
						},
					}
				},
				// 业绩chart数据
				resultsChartData: {},
				// 小程序分享标题
				share_title: "",
				// 自定义tabbar
				newData: {},
				// 当前页面路由
				activeRouter: ""
			};
		},
		computed: {
			...mapGetters({
				viewColor: 'viewColor',
			})
		},
		onLoad() {
			console.log(HTTP_REQUEST_URL);
			var that = this;
			uni.getSystemInfo({
				success(res) {
					that.windowWidth = res.windowWidth
				}
			})
			if (this.viewColor) {
				var arr = this.viewColor.split(";")
				for (var i = 0; i < arr.length; i++) {
					if (arr[i].indexOf("--view-theme") != -1) {
						var col = arr[i].split(": ");
						uni.setNavigationBarColor({
							frontColor: '#ffffff',
							backgroundColor: col[1]
						})
					}
				}
			}
			getNavigation().then(res => {
				this.newData = res.data
			})
			let routes = getCurrentPages(); // 获取当前打开过的页面路由数组
			let curRoute = routes[routes.length - 1].route //获取当前页面路由
			this.activeRouter = '/' + curRoute
		},
		onShow() {
			this.cartAIStatistics()
			this.getAIAnalysis()
			this.cartAchievement()
			getShareTitle({
				field: "CRMShareTitle"
			}).then(res => {
				this.share_title = res.data.CRMShareTitle
			})
		},
		onShareAppMessage(e) {
			return { // 自定义分享内容
				title: this.share_title,
				path: `/pages/userminp/CRM/CRM` // 路径，可传递参数到指定页面
			}
		},
		onShareTimeline() {
			return {
				title: this.share_title,
				path: `/pages/userminp/CRM/CRM`
			};
		},
		onReady() {
			this.getStatisticalChartData();
			this.getShareData();
		},
		watch: {
			// AI统计chart类型下标发生变化
			typeIndex() {
				this.getStatisticalChartData()
			},
			// AI统计时间发生变化
			toDayTime() {
				this.cartAIStatistics()
			},
			// AI分析时间发生变化
			AIAnalysisTime() {
				this.getAIAnalysis()
				this.getShareData()
			},
			// 业绩时间发生变化
			resultsTime() {
				this.cartAchievement()
			}
		},
		methods: {
			goDetail(uid) {
				uni.navigateTo({
					url: '/pages/userminp/CRM/visitDetail?uid=' + uid
				})
			},
			goShop(id) {
				uni.navigateTo({
					url: '/pages/goods_details/index?id=' + id
				})
			},
			//发私信
			goSx(item) {
				console.log(item);
				let service_id = item.kefu_id
				if (service_id) {
					return uni.navigateTo({
						url: `/pages/chat/customer_list/chat?mer_id=0&service_id=` + service_id
					})
				}
			},
			//拨打电话
			bdPhone(phone) {
				uni.makePhoneCall({
					phoneNumber: phone
				})
			},
			// 获取业绩数据
			cartAchievement() {
				var time = this.resultsTime == 1 ? 'today' : (this.resultsTime == 2 ? 'yesterday' : (this.resultsTime ==
					3 ? 'week' : (this.resultsTime == 4 ? 'month' : '')))
				cartAchievement({
					time: time
				}).then(res => {
					this.resultsData = res.data
					this.getResultsData();
				})
			},
			// 获取AI数据
			cartAIStatistics() {
				var time = this.toDayTime == 1 ? 'today' : (this.toDayTime == 2 ? 'yesterday' : (this.toDayTime == 3 ?
					'week' : (this.toDayTime == 4 ? 'month' : '')))
				cartAIStatistics({
					time: time
				}).then(res => {
					this.AIDate = res.data
				})
			},
			// 获取AI分析数据
			getAIAnalysis() {
				var time = this.AIAnalysisTime == 1 ? 'today' : (this.AIAnalysisTime == 2 ? 'yesterday' : (this
					.AIAnalysisTime == 3 ? 'week' : (this.AIAnalysisTime == 4 ? 'month' : '')))
				cartAIStatistics({
					time: time
				}).then(res => {
					this.AIAnalysis = res.data
				})
			},
			// AI统计chart切换类型
			bindPickerChange(e) {
				this.typeIndex = e.detail.value
			},
			// 获取统计
			getStatisticalChartData() {
				var tiem = [];
				var data = [];
				card_person().then(res => {
					if (this.typeIndex == 1) {
						res.data.list.product.map((item, index) => {
							tiem.push(item.date)
							data.push(item.count)
						})
					} else if (this.typeIndex == 5) {
						res.data.list.article.map((item, index) => {
							tiem.push(item.date)
							data.push(item.count)
						})
					}
				})
				setTimeout(() => {
					let res = {
						categories: tiem,
						series: [{
							name: this.typeList[this.typeIndex],
							data: data
						}]
					};
					this.statisticalChartData = JSON.parse(JSON.stringify(res));
				}, 500);
			},
			// 获取分享数据
			getShareData() {
				//模拟从服务器获取数据时的延时
				setTimeout(() => {
					var sum = 0;
					for (var i = 1; i < this.AIAnalysis.columns[2].length; i++) {
						sum = parseInt(this.AIAnalysis.columns[2][i]) + sum
					}
					// "+sum/this.AIAnalysis.columns[2][1]+"%
					let res = {
						series: [{
							data: [{
									"name": "名片",
									"value": this.AIAnalysis.columns[2][1],
									"labelText": "" + this.AIAnalysis.columns[2][1] + "次"
								},
								{
									"name": "产品",
									"value": this.AIAnalysis.columns[2][2],
									"labelText": "" + this.AIAnalysis.columns[2][2] + "次"
								},
								{
									"name": "官网",
									"value": this.AIAnalysis.columns[2][3],
									"labelText": "" + this.AIAnalysis.columns[2][3] + "次"
								},
								{
									"name": "添加",
									"value": this.AIAnalysis.columns[2][4],
									"labelText": "" + this.AIAnalysis.columns[2][4] + "次"
								},
								{
									"name": "转发",
									"value": this.AIAnalysis.columns[2][5],
									"labelText": "" + this.AIAnalysis.columns[2][5] + "次"
								},
							],
						}]
					};
					this.shareChartData = JSON.parse(JSON.stringify(res));
				}, 500);
			},
			// 获取业绩数据
			getResultsData() {
				setTimeout(() => {
					// 下单转化率
					var orderConversionRate = this.resultsData.rate.order ? (this.resultsData.rate.order / this
						.resultsData.rate.view) * 100 : 0
					// 付款转化率
					var payConversionRate = this.resultsData.rate.pay ? (this.resultsData.rate.pay / this
						.resultsData.rate.order) * 100 : 0
					// 成交转化率
					var dealConversionRate = this.resultsData.rate.pay ? (this.resultsData.rate.pay / this
						.resultsData.rate.view) * 100 : 0
					let res = {
						series: [{
							data: [{
									"name": "浏览",
									"centerText": "浏览" + this.resultsData.rate.view,
									"value": this.resultsData.rate.view,
									"labelText": "下单转化率" + parseInt(orderConversionRate) + "%"
								},
								{
									"name": "下单",
									"centerText": "下单" + this.resultsData.rate.order,
									"value": this.resultsData.rate.order,
									"labelText": "付款转化率" + parseInt(payConversionRate) + "%"
								},
								{
									"name": "付款",
									"centerText": "付款" + this.resultsData.rate.pay,
									"value": this.resultsData.rate.pay,
									"labelText": "成交转化率" + parseInt(dealConversionRate) + "%"
								},
							],
						}]
					};
					this.resultsChartData = JSON.parse(JSON.stringify(res));
				}, 500);
			},
			// 路由跳转
			goRouter(item) {
				var pages = getCurrentPages();
				var page = (pages[pages.length - 1]).$page.fullPath;
				if (item.link == page) return
				if (item.link == '/pages/chat/chatGPT/chatGPT') {
					if (!this.isLogin) {
						uni.showToast({
							title: '请登录',
							icon: 'none'
						})
						setTimeout(() => {
							uni.navigateTo({
								url: '/pages/users/wechat_login/index'
							})
						}, 1000)
						return;
					}
				}
				if (item.link == '/pages/webview/websub/websub' && !uni.getStorageSync('QIYEID') || (item.link ==
						'/pages/webview/websub/websub' && uni.getStorageSync("QIYEID") == 3)) item.link =
					'/pages/webview/webview'
				uni.redirectTo({
					url: item.link,
					fail(err) {
						uni.navigateTo({
							url: item.link,
							fail() {
								uni.reLaunch({
									url: item.link,
									fail() {
										uni.switchTab({
											url: item.link,

										})
									}
								})
							}
						})
					}
				})
			},
		}
	}
</script>
<style>
	page {
		background-color: white;
	}
</style>

<style lang="scss" scoped>
	.box {
		padding-bottom: 150rpx;
	}

	.shaxuan {
		padding-top: 20rpx;
		padding-bottom: 50rpx;
		display: flex;
		justify-content: space-around;
		background: var(--view-theme);
		text-align: center;

		&>view {
			width: 100rpx;
			color: white;
			font-weight: 600;
			padding-bottom: 5rpx;

		}

		.redname {
			border-bottom: 5rpx solid white;
		}
	}

	.selectTimeBag {
		background-color: var(--view-theme);
		color: white !important;
	}

	.one {
		color: var(--view-theme);
		font-weight: 800;
	}

	.two {
		color: var(--view-theme);
		font-weight: 600;
	}

	.three {
		color: var(--view-theme);
	}

	.toDay {
		border-radius: 20rpx 20rpx 0 0;
		padding: 0 20rpx;
		margin-top: -30rpx;
		background-color: white;

		.toDayTitle {
			font-size: 32rpx;
			font-weight: 600;
			padding: 20rpx 0;

			text {
				color: var(--view-theme);
				opacity: 0.8;
				font-size: 24rpx;
				margin-left: 5rpx;
			}
		}

		.toDayChart {
			padding: 20rpx 0;
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			grid-column-gap: 20rpx;

			&>view {
				text-align: center;
				border: 1rpx solid gainsboro;
				border-radius: 10rpx;
				padding: 20rpx 0;

				&>view:nth-of-type(2) {
					color: var(--view-theme);
					margin-top: 10rpx;
				}
			}
		}

		.selectTime {
			display: flex;
			justify-content: space-between;
			padding: 20rpx 0;

			&>view {
				width: 150rpx;
				border-radius: 30rpx;
				text-align: center;
				border: 1rpx solid var(--view-bntColor21);
				color: var(--view-theme);
				padding: 5rpx 0;
			}
		}

		.dataSwiper {
			.table {
				.tableHeader {
					color: var(--view-theme);
					background-color: var(--view-bgColor);
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 20rpx 10rpx;
					border-radius: 20rpx 20rpx 0 0;

					&>text {
						flex: 1;
						text-align: center;
					}
				}

				.tableTd {
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 20rpx 10rpx;

					text {
						flex: 1;
						text-align: center;
						// padding: 0 20rpx;
					}

					text:nth-of-type(1) {
						padding: 0;
					}
				}

				.tableTd:nth-of-type(3) {
					background-color: #f1f1f1;
				}
			}

			.swiper {
				height: 400rpx;

				.picker {
					padding: 20rpx 0;

					.uni-input {
						display: flex;
						align-items: center;

						image {
							width: 15rpx;
							height: 30rpx;
							margin-left: 20rpx;
							transform: rotateZ(90deg);
						}
					}
				}
			}

			.charts-box {
				height: 300rpx;
				width: 100%;
			}
		}

		.accessRanking {
			padding-bottom: 40rpx;

			.accessRankingTitle {
				font-size: 32rpx;
				font-weight: 600;
				padding: 20rpx 0;

				text {
					color: var(--view-theme);
					opacity: 0.8;
					font-size: 24rpx;
					margin-left: 5rpx;
				}
			}

			.accessRankingContent {
				.infoList {

					margin-bottom: 20rpx;

					.infoItem {
						display: flex;
						align-items: center;

						.info {
							flex: 1;
							margin-right: 20rpx;

							.topView {
								margin-bottom: 10rpx;
								display: flex;
								align-items: center;
								justify-content: space-between;

								.leftView {
									width: 100rpx;
									white-space: nowrap;
									/* 防止文字换行 */
									overflow: hidden;
									/* 隐藏超出容器的内容 */
									text-overflow: ellipsis;

									/* 多余的文字用省略号显示 */
									text {
										color: #000000;
										font-size: 28rpx;
									}

								}

								.centerView {
									flex: 1;

									text {
										color: #000000;
										font-size: 28rpx;
									}
								}

								.rightView {
									flex: 1;
									text-align: right;

									p {
										color: #777777;
										font-size: 24rpx;
									}
								}
							}

							.timeView {
								margin-bottom: 10rpx;

								p {
									color: #777777;
									font-size: 24rpx;
								}
							}

							.bottomView {
								display: flex;
								align-items: center;

								.left {
									flex: 1;

									p {
										color: #999999;
										font-size: 26rpx;
										// text {
										// 	color: #000000;
										// }
									}
								}

								.right {
									margin-left: 20rpx;
									margin-left: auto;

									image {
										width: 40rpx;
										height: 40rpx;
									}
								}
							}
						}

						.right {
							margin-left: 20rpx;
							margin-left: auto;

							image {
								width: 40rpx;
								height: 40rpx;
							}
						}

						image {
							width: 80rpx;
							height: 80rpx;
							border-radius: 50%;
							margin-right: 20rpx;
							margin-left: 20rpx;
						}
					}

					.shop {
						display: flex;
						align-items: center;
						padding: 20rpx 60rpx;
						border-bottom: 2rpx solid #EEEEEE;

						image {
							width: 150rpx;
							height: 150rpx;
							border-radius: 16rpx;
							margin-right: 30rpx;
						}

						text {
							flex: 1;
							color: #000000;
							font-size: 26rpx;
							line-height: 40rpx;
						}
					}
				}


			}

			.accessRankingNoContent {
				&>view {
					text-align: center;
					margin-top: 40rpx;
				}
			}
		}
	}

	.AIAnalysis {
		border-radius: 20rpx 20rpx 0 0;
		padding: 0 20rpx;
		margin-top: -30rpx;
		background-color: white;
		padding-bottom: 40rpx;

		.AIAnalysisTime {
			display: flex;
			justify-content: space-between;
			padding: 20rpx 0;

			&>view {
				width: 150rpx;
				border-radius: 30rpx;
				text-align: center;
				border: 1rpx solid var(--view-bgColor);
				color: var(--view-theme);
				padding: 5rpx 0;
			}
		}

		.AIAnalysisTitle {
			font-size: 32rpx;
			font-weight: 600;
			padding: 20rpx 0;

			text {
				color: var(--view-theme);
				opacity: 0.8;
				font-size: 24rpx;
				margin-left: 5rpx;
			}
		}

		.AIAnalysisChart {
			padding: 20rpx 0;
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			grid-column-gap: 20rpx;

			&>view {
				text-align: center;
				border: 1rpx solid gainsboro;
				border-radius: 10rpx;
				padding: 20rpx 0;

				&>view:nth-of-type(2) {
					color: var(--view-theme);
					margin-top: 10rpx;
				}
			}
		}

		.shareCharts {}

		.shareUserData {
			display: flex;
			align-items: center;
			justify-content: space-around;
			margin-top: 20rpx;

			&>view {
				text-align: center;

				image {
					width: 70rpx;
					height: 70rpx;
					padding: 20rpx;
					background: #e33c2136;
					border-radius: 50%;
				}

				view {
					color: var(--view-theme);
				}
			}

			&>view:nth-of-type(2) {
				image {
					background: #0099ff3b;
				}

				view {
					color: #81B4D6;
				}
			}

			&>view:nth-of-type(3) {
				image {
					background: #7d7d7d36;
				}

				view {
					color: #bfbfbf;
				}
			}
		}

		.table {
			.tableHeader {
				color: var(--view-theme);
				background-color: var(--view-bgColor);
				display: flex;
				align-items: center;
				justify-content: space-between;
				text-align: center;
				padding: 20rpx 10rpx;

				&>text {
					flex: 1;
				}
			}

			.tableContent {
				&>view {
					display: flex;
					align-items: center;
					justify-content: space-between;
					text-align: center;
					padding: 10rpx 0;

					&>text {
						flex: 1;
					}
				}
			}
		}
	}

	.results {
		border-radius: 20rpx 20rpx 0 0;
		padding: 0 20rpx;
		margin-top: -30rpx;
		background-color: white;
		padding-bottom: 40rpx;

		.resultsTime {
			display: flex;
			justify-content: space-between;
			padding: 20rpx 0;

			&>view {
				width: 150rpx;
				border-radius: 30rpx;
				text-align: center;
				border: 1rpx solid var(--view-bgColor);
				color: var(--view-theme);
				padding: 5rpx 0;
			}
		}

		.resultsTitle {
			font-size: 32rpx;
			font-weight: 600;
			padding: 20rpx 0;

			text {
				color: var(--view-theme);
				opacity: 0.8;
				font-size: 24rpx;
				margin-left: 5rpx;
			}
		}

		.resultsChart {
			padding: 20rpx 0;
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			grid-column-gap: 20rpx;

			&>view {
				text-align: center;
				border: 1rpx solid gainsboro;
				border-radius: 10rpx;
				padding: 20rpx 0;

				&>view:nth-of-type(2) {
					color: var(--view-theme);
					margin-top: 10rpx;
				}
			}
		}

		.resultsCharts {}

		.resultsRankingContent {
			.infoList {

				margin-bottom: 20rpx;

				.infoItem {
					display: flex;
					align-items: center;

					.info {
						margin-right: 20rpx;
						flex: 1;

						.topView {
							margin-bottom: 10rpx;
							display: flex;
							align-items: center;
							justify-content: space-between;

							.leftView {
								width: 100rpx;
								white-space: nowrap;
								/* 防止文字换行 */
								overflow: hidden;
								/* 隐藏超出容器的内容 */
								text-overflow: ellipsis;

								/* 多余的文字用省略号显示 */
								text {
									color: #000000;
									font-size: 28rpx;
								}

							}

							.centerView {
								flex: 1;

								text {
									color: #000000;
									font-size: 28rpx;
								}
							}

							.rightView {
								flex: 1;
								text-align: right;

								p {
									color: #777777;
									font-size: 24rpx;
								}
							}
						}

						.timeView {
							p {
								color: #777777;
								font-size: 24rpx;
							}
						}

						.bottomView {
							display: flex;
							align-items: center;

							.left {
								flex: 1;

								p {
									color: #999999;
									font-size: 26rpx;

									// text {
									// 	color: #000000;
									// }
								}
							}

							.right {
								margin-left: 20rpx;
								margin-left: auto;

								image {
									width: 40rpx;
									height: 40rpx;
								}
							}
						}
					}

					.right {
						margin-left: 20rpx;
						margin-left: auto;

						image {
							width: 40rpx;
							height: 40rpx;
						}
					}

					image {
						width: 80rpx;
						height: 80rpx;
						border-radius: 50%;
						margin-right: 20rpx;
						margin-left: 20rpx;
					}
				}

				.shop {
					display: flex;
					align-items: center;
					padding: 20rpx 60rpx;
					border-bottom: 2rpx solid #EEEEEE;

					image {
						width: 150rpx;
						height: 150rpx;
						border-radius: 16rpx;
						margin-right: 30rpx;
					}

					text {
						flex: 1;
						color: #000000;
						font-size: 26rpx;
						line-height: 40rpx;
					}
				}

			}
		}

		.resultsRankingNoContent {
			&>view {
				text-align: center;
				margin: 40rpx 0;
			}
		}

		.resultsDealTopContent {
			&>view {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 20rpx;

				&>view:nth-of-type(1) {
					display: flex;
					align-items: center;

					image {
						width: 80rpx;
						height: 80rpx;
						border-radius: 50%;
						margin-right: 20rpx;
					}

					&>view {
						margin-right: 20rpx;
					}
				}
			}
		}

		.resultsDealTopNoContent {
			&>view {
				text-align: center;
				margin: 40rpx 0;
			}
		}
	}

	.page-footer {
		position: fixed;
		bottom: 0;
		z-index: 30;
		display: flex;
		align-items: center;
		justify-content: space-around;
		width: 100%;
		height: calc(98rpx+ constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
		height: calc(98rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/
		box-sizing: border-box;
		border-top: solid 1rpx #F3F3F3;
		background-color: #fff;
		box-shadow: 0px 0px 17rpx 1rpx rgba(206, 206, 206, 0.32);
		padding-bottom: constant(safe-area-inset-bottom); ///兼容 IOS<11.2/
		padding-bottom: env(safe-area-inset-bottom); ///兼容 IOS>11.2/

		.foot-item {
			display: flex;
			width: max-content;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			position: relative;

			.count-num {
				position: absolute;
				display: flex;
				justify-content: center;
				align-items: center;
				width: 40rpx;
				height: 40rpx;
				top: 0rpx;
				right: -15rpx;
				color: #fff;
				font-size: 20rpx;
				background-color: #FD502F;
				border-radius: 50%;
				padding: 4rpx;
			}
		}

		.foot-item image {
			height: 50rpx;
			width: 50rpx;
			text-align: center;
			margin: 0 auto;
		}

		.foot-item .txt {
			font-size: 24rpx;


			&.active {}
		}
	}
</style>